<template>
  <div class="shopCart">
	<shop-header>	
			<h2>购物车</h2>	
		</shop-header>
		<!-- <div class="unCart" v-if="cartList.length == 0">
			<p>购物车快饿瘪了T.T</p>
			<span>快点给我挑点宝贝</span>
			
		</div> -->

		<div v-if="cartList.length > 0" class="cart-list-wrapper">
			<div class="cart-head bottom-1px">
				<div class="cart-length">共<span>{{ cartList.length }}</span>件商品</div>
		  <div class="delete" @click="deleteSelected" v-if="disabled"><span>删除</span></div>
		  <div v-else class="delete"><span style="border: 1px solid #999; color: #999">删除</span></div>
		</div>
			<div class="cart-list-item bottom-1px" v-for="(item,index) in cartList">
				<div class="check-icon">
					<x-icon v-if="item.checked" fill="#f23030" @click="checkItem(index)" type="ios-checkmark" size="24"></x-icon>
				<x-icon v-else fill="#999" @click="checkItem(index)" type="ios-circle-outline" size="24"></x-icon>
				</div>
				<div class="goods-img">
					<span class="img-holder">
						<img :src="item.goodsCover" class="obj-cover">
					</span>
				</div>
				<div class="goods-container">
					<div class="top">
						<span class="name">{{ item.goodsName }}</span>
					</div>
					<div class="bottom">
						<div class="price">¥{{ item.price | toDecimal }}</div>
						<cartcontrol @quanyityChange="quanyityChange" :goodsId="item.goodsId" :count="item.quantity"></cartcontrol>
					</div>
				</div>
			</div>
		</div>
		<div class="fixBar-wrapper" v-if="cartList.length > 0">
			<div class="fixBar">
				<div class="fixed-left">
					<div class="icon-select">
						<x-icon @click="checkAllStatus" fill="#f23030" type="ios-checkmark" v-if="checkAll" size="24"></x-icon>
					<x-icon @click="checkAllStatus" fill="#999" type="ios-circle-outline" v-else size="24"></x-icon>
			  <span>全选</span>
					</div>
					<div class="total-price">
						<p>总计：<strong>¥{{ totalPrice | toDecimal }}</strong></p>
						<small>总额¥{{ totalPrice | toDecimal }} 立减¥0.00</small>
					</div>
				</div>
				<div class="toBuy">
					<!-- <mu-flat-button label="去结算" backgroundColor="#e4393c" color="#fff" tag="button" /> -->
					<span :class="{ 'disabled': disabled != true }" @click="toBuy">去结算</span>
				</div>
			</div>
		</div>
		<no-results v-if="cartList.length == 0" text="购物车空空如也~" :showBtn="true"></no-results>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'	
import { toDecimal } from '@/utils/mUtils'
import ShopHeader from '@/components/public/ShopHeader'
import Cartcontrol from '@/components/public/Cartcontrol'
import http from '@/utils/http'
import NoResults from '@/components/public/NoResults'

export default {
	components: {
		ShopHeader,
		Cartcontrol,
		NoResults
	},
  data () {
	return {
		allChoose: false,
		checkAll: true,
		cartList: []
	}
  },
  computed: {
  	...mapGetters(['userInfo']),
		totalPrice () {
		let totalPrice = 0
		this.cartList.forEach((item) => {
		  if (item.checked) {
			totalPrice += item.price * item.quantity;      
		  }
		})
		return totalPrice
	},
		disabled () {
			for (let i = 0; i < this.cartList.length; i++) {
				if (this.cartList[i].checked) {
					return true
				}
			}
		}
  },
  methods: {
		...mapActions(['getCartLen']),
		quanyityChange (val) {
			let index = this.cartList.findIndex(n => n.goodsId == val.goodsId)
			this.cartList[index].quantity = val.quantity
		},
		// 删除选择的购物车
		deleteSelected () {
			let that = this
			this.$vux.confirm.show({
				title: '提示信息',
				content: '确定要删除吗？',
				onConfirm () {
					let cartList = []
		  		let selectGoods = []
		  that.cartList.forEach((item) => {
			if (!item.checked) {
			  cartList.push(item)
			}else {
			  selectGoods.push(item._id)
			}
		  })
		  http.post('/api/v1/cart', { cartIds: JSON.stringify(selectGoods) }, false, res => {
				if (res.status == 1) {
					that.getCartLen()
				  that.cartList = cartList
				  that.$vux.toast.show({
						text: res.msg,
						type: 'success',
						width: 'auto',
						position: 'middle'
				  })
				}else {
					that.$vux.toast.show({
						text: res.msg,
						type: 'warn',
						width: 'auto',
						position: 'middle'
				  })
				}
		  })
				}
		  })
		},
		toBuy () {
			if (!this.userInfo) {
  			this.$router.push({ path: '/login' })
  			return
  		}
			if (!this.disabled) return
			let arr = []
			this.cartList.forEach(item => {
				if (item.checked) {
					let goods = {
						goodsId: item.goodsId,
						goodsName: item.goodsName,
						goodsCover: item.goodsCover,
						price: item.price,
						quantity: item.quantity
					}
					if (item.skuId) {
						goods.skuId = item.skuId
					}
					arr.push(goods)
				}				
			})
			this.$store.dispatch('saveBuyConfirm', arr)
  		this.$router.push({ path: '/order/buyConfirm' })
		},
		checkItem (index) {
			this.cartList[index].checked = !this.cartList[index].checked
	  let item = this.cartList.find(n => !n.checked )
	  if (!item) {
		this.checkAll = true
	  }else {
		this.checkAll = false
	  }
		},
		// 全选购物车
		checkAllStatus () {
		  this.checkAll = !this.checkAll
		  this.cartList.forEach((item) => {
			if (this.checkAll) {
			  item.checked = true
			}else {
			  item.checked = false
			}
		  });
		}, 
		getCartList () {
			http.get('/api/v1/cart', {}, false, res => {
				if (res.status == 1) {
					let cartList = res.data
					this.cartList = cartList.map(item => {
						item.checked = true
						return item
					})
				}
			})
		}
  },
  mounted () {
		this.getCartList()
  },
  filters: {
		toDecimal (val) {
			return toDecimal(val)
		}
  }
}
</script>

<style scoped>
.cart-head {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background: #fff;
}
.cart-head:after {
	bottom: 0;
}
.cart-length {
	color: #999;
	flex: 1;
}
.cart-length span {
	color: #e02e24;
}
.delete span {
  font-size: 12px;
  color: #e02e24;
  padding: 3px 10px;
  border: 1px solid #e02e24;
  border-radius: 30px;
}
.cart-list-item {
	display: flex;
	padding: 15px;
	background: #fff;
	align-items: center;
}
.cart-list-item:after {
	bottom: 0;
}
.check-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-right: 8px;
	position: relative;
	font-size: 20px;
	line-height: normal;
}
.goods-img {
	flex: 0 0 70px;
	width: 70px;
	height: 70px;
	margin-right: 8px;
}
.goods-img .img-holder {
	width: 70px;
	display: block;
	padding-bottom: 100%;
}
.goods-container {
	flex: 1;
}
.top,.bottom {
	display: flex;
}
.top .name {
	display: -webkit-box;
	font-size: 14px;
	color: #333;
	line-height: 20px;
	height: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.top .delete-goods svg {
	flex: 0 0 auto;
	fill: #999;
}
.bottom {
	padding-top: 8px;
}
.bottom .price {
	flex: 1;
	line-height: 24px;
	color: #f23030;
}
.fixBar-wrapper {
	height: 50px;
}
.fixBar {
	position: fixed;
	bottom: 0;
	width: 100%;
	max-width: 640px;
	background: rgba(255, 255, 255, .95);
	z-index: 98;
	display: flex;
	height: 50px;
}
.fixed-left {
	flex: 1;
	display: flex;
	padding: 0 15px;
	align-items: center;
	border-top: 1px solid #f1f1f1;
}
.icon-select {
	flex: 0 0 auto;
	margin-right: 10px;
	color: #999;
}
.icon-select *{
	display: inline-block;
	vertical-align: middle;
}
.icon-select span {
	position: relative;
	top: 1px;
}
.total-price {
	flex: 1;
	text-align: right;
	padding: 8px 0;
}
.total-price p {
	font-size: 16px;
	font-weight: 700;
	line-height: 16px;
}
.total-price strong {
	color: #e93b3d;
}
.total-price small {
	display: block;
	font-size: 12px;
	line-height: 12px;
	color: #999;
	padding-top: 2px;
}
.toBuy span {
	display: block;
	padding: 0 16px;
	min-width: 80px;
	background: #e4393c;
	border-radius: 0;
	height: 50px;
	line-height: 50px;
	color: #fff;
	text-align: center;
}
.toBuy span.disabled {
	background: #d7d7d7;
	color: #999;
}
</style>
